<template>
    <div class="money">
        <div class="conter">
            我的余额
            <h1>￥{{ money }}</h1>
        </div>

        <div class="bottom">
            <!-- 账户冲值部分 -->
            <van-tabs v-model="active">
                <van-tab title="账户充值">
                    <div class="uls">
                        <div v-for="item in list" :key="item.id" :class="['list', { active: index == item.id + 1 }]" @click="index = item.id + 1">
                            <span v-if="item.song > 0">{{ item.money1 }}.00元</span>
                            <i v-if="item.song > 0">赠送{{ item.song }}.00元</i>
                            <span v-else> <input class="inp" type="text" v-model="restMoney" placeholder="其他" /></span>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="佣金导入">
                    <van-cell-group>
                        <van-field v-model="value" label="￥" placeholder="0.00" />
                    </van-cell-group>
                </van-tab>
            </van-tabs>

            <!-- 注意事项 -->
            <div class="content">
                <h1>注意事项:</h1>
                <h3>充值后帐户的金额不能提现，可用于商城消费使用</h3>
                <h3>佣金导入账户之后不能再次导出、不可提现</h3>
                <h3>账户充值出现问题可联系商城客服，也可拨打商城客服热线：4008888888</h3>
            </div>

            <!-- 立即冲值 -->
            <van-button class="btn" v-if="active == 0" color="linear-gradient(to right, #ff6034, #ee0a24)" @click="addmoney" black>立即充值</van-button>
            <van-button class="btn" v-else color="linear-gradient(to right, #ff6034, #ee0a24)" black>立即转入</van-button>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        return {
            active: 0,
            list: [
                { id: 1, money1: 20.0, song: 2.0 },
                { id: 2, money1: 30.0, song: 3.0 },
                { id: 3, money1: 50.0, song: 5.0 },
                { id: 4, money1: 500.0, song: 50.0 },
                { id: 5, money1: 800.0, song: 100.0 },
                { id: 6, money1: 0, song: 0 },
            ],
            index: 2,
            value: "",
            restMoney: null,
        };
    },
    computed: {
        ...mapState(["money"]),
    },
    methods: {
        ...mapMutations(["changemoney"]),
        addmoney() {
            // 拿到金额跟赠送的金额
            let numberMoney = this.list[this.index - 2].money1 + this.list[this.index - 2].song;

            // 当输入为自定义时,改变的值为自定义的
            if (this.index - 1 == 6) {
                numberMoney = parseFloat(this.restMoney);
            }
            this.changemoney(numberMoney);
            this.restMoney = null;
        },
    },
};
</script>

<style lang="scss" scoped>
.money {
    width: 100vw;
    height: 100vh;
    background: #e83323;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    .conter {
        padding: 20px auto;
        text-align: center;
        font-size: 14px;
        color: #fff;
        margin-top: 40px;
        h1 {
            font-size: 40px;
            font-weight: 700;
            margin-top: 10px;
        }
    }

    // 账户充值部分

    .bottom {
        .uls {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            margin-top: 20px;
        }
        .list {
            width: 110.46px;
            height: 58.4px;
            border-radius: 15px;
            background: #f5f5f5;
            margin-top: 5px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: gray;
            padding: 3px;
            span: {
                font-size: 14px;
            }
            .inp {
                // color: red;
                width: 110.46px;
                height: 58.4px;
                border: none;
                background: transparent;
                text-align: center;
                border-radius: 15px;
                overflow: hidden;
            }

            i {
                font-size: 12px;
                margin-top: 5px;
            }
            &.active {
                background: #ec3323;
                color: #fff;
            }
        }
    }

    // 注意事项

    .content {
        margin-top: 10px;
        font-size: 14px;
        margin-left: 15px;
        h1 {
            font-size: 16px;
        }
        h3 {
            margin-top: 10px;
            font-size: 12px;
        }
    }

    .bottom {
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        height: 80vh;
        transform: translateY(30px);
    }

    // 立即充值
    .btn {
        width: 95vw;
        margin-left: 10px;
        margin-top: 30px;
        border-radius: 20px;
    }
}
</style>
